<template>
	<view>
		<view class="top">
			<map id="my_test_map" style="width: 750rpx; height: 540upx;" :include-points='get_address'
				@markertap="check_market" :circles="circles"  :scale="scale" @regionchange="regionchange"
				:markers='markers' :latitude="this.lat" :longitude="this.long" >
			</map>
			<!-- <button @click="change_markers">变更</button> -->
		</view>
		<view class="font" v-for="item in resultRoId">
			<text>订单编号{{item.number}}</text>
			<view class="img">
				<img class="location" src="/static/img/location.png">
				<text class="content-text-location-font">{{item.address}}</text>
			</view>
			<view class="img">
				<img class="time" src="/static/img/time.png">
				<text class="content-text-location-font">上门时间：{{item.getTime}}</text>
			</view>
			<view v-if="item.roType !== 4 && item.roType !== 5 ">
				<view class="font">
					<text>联系方式:&nbsp {{item.contactsName}}&nbsp &nbsp{{item.phone}}</text>
				</view>
				<view class="font">
					<text>回收内容:&nbsp {{item.content}}</text>
				</view>
				<view class="font">
					<text>预计重量:&nbsp {{item.weight}}kg</text>
				</view>
				<view class="font">
					<text>备注:&nbsp {{item.remarks}}</text>
				</view>
				<view class="font" v-if="item.sumTime > 0 & item.roType == 1 ">
					<text>接单剩余时间:
						<view class="djs">
							<uni-countdown :day="item.d" :hour="item.h" :minute="item.m" :second="item.s">
							</uni-countdown>
						</view>
					</text>
				</view>
				<view class="font" v-if="item.sumTime == null">
					<text class="content-text-location-font" style="color: crimson;">您已超时

					</text>
				</view>
			</view>
		</view>

		<view v-for="item in resultRoId">
			<view v-if="item.roType !== 4 && item.roType !== 5 ">
				<view class="uni-box1">
					<navigator @click="hphone(item.phone)">
						<view class="mileage">
							<img class="phone" src="/static/img/phone.png">
						</view>
					</navigator>
					<view class="line">

					</view>
					<view class="tolai" @click="tochat(item.userId)">
						<img class="chat" src="/static/img/chat.png">
					</view>
				</view>
				<navigator @click="orderState(item.roType,item.roId)">
					<view class="uni-box2">
						<text class="state" v-if="item.roType==1">立即接单</text>
						<text class="state" v-if="item.roType===2">导航</text>
						<text class="state" v-if="item.roType===3">已送达</text>
						<text class="state" v-if="item.roType===4">已结算</text>
					</view>
				</navigator>
			</view>
		</view>
		<view v-for="item in resultRoId">
			<view v-if="item.roType == 4 ">
				<view class="box">
					<view class="details">
						<text>废纸(KG):</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue1"  @change="change1"/>
					</view> -->
					<view class="price">
						<text>5币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>塑料(KG):</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue2"  @change="change2"/>
					</view> -->
					<view class="price">
						<text>8币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>金属(KG):</text>
					</view>
					<!-- <view class="number">
				
						<uni-number-box :value="details.numberValue3" @change="change3" />
				
					</view> -->
					<view class="price">
						<text>12币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>玻璃(KG):</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue4" @change="change4" />
					</view> -->
					<view class="price">
						<text>10币/公斤</text>
					</view>
				</view>
				<view class="total">合计(KG): </view>

				<view class="total2">币</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitudeNew2:'',
				longitudeNew2:'',
				
				nums: '',

				d: '',
				h: '',
				m: '',
				n: '',
				resultRoId: {},


				long: 0,
				lat: 0,

				id: 'ybus_map',
				center_lat: this.lat,
				center_lng: this.long,

				markers: [],
				scale: 15,
				get_address: [],
				circles: [{ //在地图上显示圆
					latitude: this.lat,
					longitude: this.long,
					fillColor: "#e6060a6A", //填充颜色
					color: "#e6060a6A", //描边的颜色
					radius: 300, //半径
					strokeWidth: 2, //描边的宽度
				options:'',
				}]
			}

		},
		onLoad(options) {
			 console.log(options)
			this.test()
			// this.loadDataRedis()
		},
		methods: {
			test(){
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.latitudeNew2 = res.latitude
						this.longitudeNew2 = res.longitude
						console.log("新33",this.longitudeNew2)
						console.log("新33",this.latitudeNew2)
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						 this.change_markers()					
					}
				});
			},
			tochat(id) {
				console.log(id, "zaizhe1")
				uni.navigateTo({
					url: '/pages/message/chat?conversationID=C2C' + id
				})
			},
			hphone(phone) {
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('调用成功')
					},
					fail: (res) => {
						console.log(res);
					}
				});
				plus.device.dial(phoneNumber, true)
			},
			loadDataRedis() {
				console.log(this.options.roId, "key")
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRedisRecyclingorder',
					method: 'GET',
					data: {
						roId: this.options.roId,

					},
					dataType: 'json',
					success: (res) => {
						var result = JSON.stringify(res.data.data.message);
						this.resultRoId = res.data.data.recyclingorderVoRoId;
						//console.log(this.resultRoId, "看看")
						this.loadData()
					},
				})
			},
			orderState(roType, roId) {
				console.log(roType,"55555555555555555555")
				
				if (roType == 1) {
					//console.log("是3")
					uni.request({
						url: 'http://localhost:9525/xkrider/recyclingorder/getRiderDistance',
						method: 'GET',
						data: {
							roId: this.options.roId,
							roType: roType,
							riderId: 3,
							longitudeNew2:this.longitudeNew2,
							latitudeNew2:this.latitudeNew2,
							
						},
						dataType: 'json',
						success: (res) => {
							var result = JSON.stringify(res.data.data.message);
							this.resultRoId = res.data.data.recyclingorderVoRoId;
							//console.log(this.resultRoId, "看看")
							this.change_markers()
						},
					})
				}
				if (roType == 2) {
					uni.request({
						url: 'http://localhost:9525/xkrider/recyclingorder/uptRecyclingorderRoId',
						method: 'GET',
						data: {
							roId: this.options.roId,
							roType: roType,
							riderId: 3
						},
						dataType: 'json',
						success: (res) => {
							var result = JSON.stringify(res.data.data.message);
							this.resultRoId = res.data.data.recyclingorderVoRoId;
							//console.log(this.resultRoId, "看看")
							this.change_markers()
						},
					})
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						
						success: function (res) {			
							uni.openLocation({
								latitude: this.latitudeNew2,
								longitude: this.longitudeNew2,	
								
								success: function () {
									console.log('success');			
									console.log("333333333333")
								}
							});
						}
					});
				}
				// console.log("状态", roType, "订单", roId)
				if (roType == 3) {
					//console.log("是3")
					uni.navigateTo({
						url: './Recovery?roId=' + roId
					})
				}
				// console.log(roType)
				// console.log(this.options.roId)
				
				
			},
			
			change_markers() {		
				console.log("开始执行地图标注");
				//生成标记点
				var begin_markers = [{
						id: "user" +123,
						latitude: this.latitudeNew2,
						longitude: this.longitudeNew2,
						iconPath: '/static/img/rider.png',
						width: 30,
						height: 30,
					}
				]
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRecyclingorderRoId',
					method: 'GET',
					data: {
						roId: this.options.roId,
					},
					dataType: 'json',
					success: (res) => {
						var result = JSON.stringify(res.data.data.message);
						this.resultRoId = res.data.data.recyclingorderVoRoId;
						// console.log(this.resultRoId, "看看")
						var latitudeNew = res.data.data.recyclingorderVoRoId[0].roLatitude
						var longitudeNew = res.data.data.recyclingorderVoRoId[0].roLongitude
						
						
						var a = {
							id: "user" + res.data.data.recyclingorderVoRoId[0].roId,
							latitude: res.data.data.recyclingorderVoRoId[0].roLatitude,
							longitude: res.data.data.recyclingorderVoRoId[0].roLongitude,
							iconPath: "/static/img/coordinate.png",
							width: 30,
							height: 30,
						}
						begin_markers.push(a)
						console.log("用户",begin_markers)
						var now_address = [{
							id: "user" +123,
							latitude: this.latitudeNew2,
							longitude: this.longitudeNew2,
							iconPath: "/static/img/rider.png",
							width: 30,
							height: 30
						}]
						//获取地图
						this.markers = now_address.concat(begin_markers);
						console.log();
						
					},
				})
				
				

				//缩放视野以包含所有给定的坐标点
				this.get_address = [{
					latitude: this.latitudeNew2,
					longitude: this.longitudeNew2,
				}]
				// this.get_address = [{
				// 		latitude: 34.254430,
				// 		longitude: 108.947040,
				// 	},
				// 	{
				// 		latitude: 34.275093,
				// 		longitude: 108.966816
				// 	}
				// ]

				
				this.$forceUpdate();
			},
			//拖拽地图
			regionchange(e) {
				console.log(e);

				var _that = this;
				_that.mainmap = uni.createMapContext('my_test_map', this);
				_that.mainmap.getCenterLocation({
					success(res) {
						var lat = res.latitude
						var lng = res.longitude
						console.log(lat);
						console.log(lng);
						//重设标记点
						_that.mainmap.translateMarker({
							markerId: 'begin',
							destination: {
								latitude: lat,
								longitude: lng
							},
							duration: 350,
							animationEnd() {
								console.log('设置');
							}
						})
					}
				})

			},
			//点击标记
			check_market(e) {
				console.log(e.detail);
			}
		}
	}
</script>
export default {
data() {
return {

},
onLoad() {

},
methods: {}
}
</script>

<style>
	page {
		/* background-color: #EBFCF9; */
		font-weight: bold;
	}

	.box {
		/* border: 5px solid #3F536E; */
		float: left;
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.price {
		float: right;
		margin-top: 20rpx;
		margin-right: 60rpx;
		font-size: 20rpx;
		color: #ED5565;
	}

	.number {
		margin-top: 20rpx;
		margin-left: 10rpx;
		float: left;
	}

	.total {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-left: 100rpx;
		float: left;
	}

	.total2 {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-right: 50rpx;
		float: right;
		color: #ED5565;
	}

	.details {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-left: 100rpx;
		float: left;
	}

	.details {
		margin-left: 80rpx;
	}

	.djs {
		float: right;
		margin-right: 220rpx;
	}

	.state {
		padding: 50rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.uni-box2 {
		width: 360rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		/* margin-left: 25px; */
		/* box-shadow: darkgrey 3px 3px 3px 3px; */
		/* // position: absolute;
		// left: 25rpx; */
		/* background-color: #FFFFFF; */
		/* float: left; */
		margin-top: 20px;
		float: right;
		display: flex;
		justify-content: center;
		background-color: #2ABA66;
	}

	.line {
		width: 0rpx;
		height: 50rpx;
		border: 1px solid #E4E4E4;
		float: left;
		margin-left: 65rpx;
		margin-top: 50rpx;
	}

	.chat {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		float: left;
	}

	.phone {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		float: left;
	}

	.uni-box1 {
		width: 300rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		float: left;
		margin-top: 20px;
	}

	.font {
		margin-top: 30rpx;
		margin-left: 60rpx;
		font-size: 25rpx;
	}

	.img {
		margin-top: 30rpx;
	}

	.location {
		width: 45rpx;
		height: 45rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
		;
	}

	.time {
		width: 43rpx;
		height: 43rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
	}
</style>
